<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="js/bootstrap/css/bootstrap.min.css">
    <style>
        .hide {
            display: none;
        }
    </style>
</head>
<body>
<div class="container">
    <ol class="breadcrumb">
        <li><a href="Admin.html">学生成绩管理系统</a></li>
        <li><a href="Admin.html">个人主页</a></li>
        <li>修改账号密码</li>
    </ol>
    <h3 class="page-header">修改账号密码</h3>
    <form class="form-horizontal">
        <div class="form-group">
            <label class="col-sm-2">初始密码</label>
            <div class="col-sm-8">
                <input type="text" placeholder="请输入初始密码" class="form-control" v-model="login.loginPw">
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-8 col-sm-offset-2">
                <input type="button" value="确定" class="btn btn-success" @click="checkPw()">
            </div>
        </div>
    </form>
<!--        隐藏-->
    <form class="form-horizontal hide" id="npw">
        <div class="form-group">
            <label class="col-sm-2">新密码</label>
            <div class="col-sm-8">
                <input type="text" placeholder="请输入新密码" class="form-control" v-model="login.loginNpw">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2">再次输入</label>
            <div class="col-sm-8">
                <input type="text" placeholder="请再次输入新密码" class="form-control" v-model="login.loginNpw2">
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-8 col-sm-offset-2">
                <input type="button" value="修改" class="btn btn-success" @click="updatePw()">
                <input type="reset" value="重置" class="btn btn-danger">
            </div>
        </div>
    </form>
</div>
<script src="js/vue/vue2.5.js"></script>
<script src="js/vue/axios.min.js"></script>
<script src="js/jquery.js"></script>
<script src="js/layer/layer.js"></script>
<script src="js/param.js"></script>
<script>
    let p;
    new Vue({
        el:'.container',
        data:{
            login:{
                loginId:'',
                loginPw:'',
                loginNpw:'',
                loginNpw2:'',
                loginType:'',
            }
        },
        methods:{
            //修改
            updatePw(){
                //验证表单逻辑
                if(!this.checkForm()) return;

                //向服务器发出ajax请求 增加部门
                axios.get('/login/update',{params:{Id:this.login.loginId,Pw: this.login.loginNpw}})
                    .then(resp =>{
                        layer.msg('密码修改成功！');
                        setTimeout(()=>{
                            if(this.login.loginType == 1) {
                                location.href='Admin.html';
                            }else if(this.login.loginType == 2) {
                                location.href='Student.html';
                            }

                        },500);
                    })
            },
            //表单验证
            checkForm() {
                //验证成绩
                let r = /^[0-9]{6}$/;
                if(!r.test(this.login.loginNpw)) {
                    layer.alert('密码必须为六位数字！');
                    return false;
                }

                if(this.login.loginNpw != this.login.loginNpw2) {
                    layer.alert('密码不一致！');
                    return false;
                }
                return true;
            },
            checkPw() {
                //验证初始密码
                if(this.login.loginPw == p) {
                    const npw = document.getElementById('npw');
                    npw.className = 'form-horizontal';
                }
            },
            getPw() {
                axios.get('/login/get',{params:{Id:this.login.loginId}})
                    .then(resp=>{
                        p = resp.data.loginPw;
                        console.log(p);
                    })
            }
        },
        mounted(){
            this.login.loginId = getParam('loginId');
            this.login.loginType = getParam('loginType');
            console.log(this.login.loginId);
            this.getPw();
        }

    });
</script>
</body>
</html>